<template>
  <div class="user-card" @click="isShowPanel = !isShowPanel">
    <div class="user-img">
      <i class="iconfont icon-yonghu"></i>
    </div>
  </div>
  <Transition>
    <UserPanel v-if="isShowPanel" />
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
import UserPanel from './UserPanel.vue'
const isShowPanel = ref(false)
</script>

<style lang="scss" scoped>
.user-card {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  width: 50px;
  .user-img {
    position: relative;
    height: 50px;
    width: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ccc;
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.16),
      0 1px 3px 0 rgba(0, 0, 0, 0.12);
    i {
      position: absolute;
      font-size: 30px;
      color: #fff;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
.v-enter-active {
  transition: all 0.5s ease;
}
.v-leave-active {
  transition: all 0.8s ease;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(-200px);
  opacity: 0;
}
</style>
